<template>
  <span class="svg-icon" :style="iconStyles">
    <!-- 这里是图标占位符，实际项目中可以嵌入真正的SVG代码 -->
    {{ iconText }}
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  type: {
    type: String,
    required: true,
  },
  size: {
    type: Number,
    default: 16,
  },
  color: {
    type: String,
    default: 'currentColor',
  },
})

// 根据type生成显示文本（仅示意，实际项目替换为真实图标）
const iconText = computed(() => {
  switch (props.type) {
    case 'cart':
      return '🛒'
    case 'user':
      return '👤'
    case 'heart':
      return '❤️'
    case 'bell':
      return '🔔'
    case 'search':
      return '🔍'
    case 'arrow-right':
      return '➡️'
    case 'shield':
      return '🛡️'
    case 'tag':
      return '🏷️'
    case 'truck':
      return '🚚'
    case 'rotate':
      return '🔄'
    case 'menu':
      return '≡'
    default:
      return props.type.substring(0, 1).toUpperCase()
  }
})

const iconStyles = computed(() => ({
  fontSize: `${props.size}px`,
  color: props.color,
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: `${props.size}px`,
  height: `${props.size}px`,
}))
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  line-height: 1;
}
</style>
